<template>
    <div class="forms-warp">
        <form action="" autocomplete="off" class="sign-in-form" :style="signInStyle">
            <div class="logo">
                <h4>问卷调查系统</h4>
            </div>

            <div class="heading">
                <h2>Welcome Back</h2>
                <h6>Not registred yet?</h6>
                <a href="#" class="toggle" @click="signUp"> Sign up</a>
            </div>

            <div class="actual-form">
                <div class="input-wrap">
                    <input type="text" class="input-field" autocomplete="off" id="name" v-model="loginName" required>
                    <label>User</label>
                </div>

                <div class="input-wrap">
                    <input type="password" class="input-field" autocomplete="off" id="password" v-model="loginPassword"
                        required>
                    <label>Password</label>
                </div>

                <input type="button" value="Sign In" class="sign-btn" @click="toHome">
                <p class="text">
                    Forgotten your password or you login datails?
                    <a href="#">Get help</a> singing in
                </p>
            </div>
        </form>

        <form action="" autocomplete="off" class="sign-up-form" :style="signUpStyle">
            <div class="logo">
                <h4>问卷调查系统</h4>
            </div>

            <div class="heading">
                <h2>Get Started</h2>
                <h6>Already have an account?</h6>
                <a href="#" class="toggle" @click="signIn"> Sign in</a>
            </div>

            <div class="actual-form">
                <div class="input-wrap">
                    <input type="text" class="input-field" autocomplete="off" id="name" v-model="registerName" required title="请输入手机号或者邮箱">
                    <label>User</label>
                </div>

                <div class="input-wrap">
                    <input type="password" class="input-field" autocomplete="off" id="password"
                        v-model="registerPassword" required>
                    <label>Password</label>
                </div>

                <div class="input-wrap">
                    <input type="password" class="input-field" autocomplete="off" id="password"
                        v-model="reEnterPassword" required>
                    <label>Re-enter Password</label>
                </div>

                <input type="button" value="Sign Up" class="sign-btn" @click="register">

                <p class="text">
                    By signing up,I agree to the
                    <a href="#">Trems of Services</a> and
                    <a href="#">Privacy Policy</a>
                </p>
            </div>
        </form>
    </div>
</template>


<script>
    import {
        login,registered
    } from '@/util/apis'
    export default {
        data() {
            return {
                signInStyle: {
                    opacity: 1,
                    pointerEvents: 'all'
                },
                signUpStyle: {
                    opacity: 0,
                    pointerEvents: 'none'
                },
                loginName: '',
                loginPassword: '',
                registerName: '',
                registerPassword: '',
                reEnterPassword: '',
                isRepeatName: false,
                isPasswordRight: false
            }
        },
        methods: {
            signUp() {
                this.$parent.isSignUp = true
                this.$parent.formLeft = {
                    left: '55%'
                }
                this.$parent.carouselLeft = {
                    left: 0
                }
                this.signInStyle = {
                        opacity: 0,
                        pointerEvents: 'none'
                    },
                    this.signUpStyle = {
                        opacity: 1,
                        pointerEvents: 'all'
                    }
            },
            signIn() {
                this.$parent.isSignUp = false
                this.$parent.formLeft = {
                    left: 0
                }
                this.$parent.carouselLeft = {
                    left: '45%'
                }
                this.signInStyle = {
                        opacity: 1,
                        pointerEvents: 'all'
                    },
                    this.signUpStyle = {
                        opacity: 0,
                        pointerEvents: 'none'
                    }
            },
            register() {
                //注册的屎山 不想写设计模式 开摆
                let phone = /^1[3456789]\d{9}$/
                let emali = /^[a-z0-9]{1}[a-z0-9_-]{1,}@[a-z0-9]{1,}(\.[a-z]{2,})*\.[a-z]{2,}$/
                if (this.registerName && this.registerPassword && (this.registerPassword == this.reEnterPassword)) {
                    if(phone.test(this.registerName) || emali.test(this.registerName)){
                        let params = {
                            username: this.registerName,
                            password: this.registerPassword
                        }
                        registered(params).then((response) => {
                            if(!response.error){
                                alert('注册成功捏~')
                                this.signIn()
                                this.registerName = ''
                                this.registerPassword = ''
                                this.reEnterPassword = ''
                            }
                            else{
                                alert('用户名已被注册捏~')
                            }
                        }).catch((error)=>{
                            console.log(error);
                        })
                    }
                    else{
                        alert('用户名格式不规范')
                    }

                } else if (this.registerName && this.reEnterPassword && (this.registerPassword != this
                        .reEnterPassword)) {
                    alert('两次输入的密码不一致')
                }
            },
            toHome() {
                let phone = /^1[3456789]\d{9}$/
                let emali = /^[a-z0-9]{1}[a-z0-9_-]{1,}@[a-z0-9]{1,}(\.[a-z]{2,})*\.[a-z]{2,}$/
                if (this.loginName && this.loginPassword) { //登录判断写下
                    if(phone.test(this.loginName) || emali.test(this.loginName)){
                        this.$store.state.userName = ''
                        let params = {
                            username: this.loginName,
                            password: this.loginPassword
                        }
                        login(params)
                            .then((response) => {
                                console.log(response)
                                if(!response.error){
                                    this.$store.commit('changeUserName', response.message[0].username)
                                    console.log(response.message[0].username)
                                    sessionStorage.setItem('username', this.$store.state.userName)
                                    this.$store.commit('getQuestion', response)
                                    this.$router.push({
                                        path: '/main',
                                        query: {
                                            username: this.loginName
                                        }
                                    })
                                }
                                else{
                                    alert('用户名或者密码错误~')
                                }
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    }
                    else{
                        alert('用户名格式不规范，请输入正确的手机号或者邮箱捏~')
                    }
                }
                else if(this.loginName && !this.loginPassword) {
                    alert('密码不能为空')
                }
                else {
                    alert('用户名不能为空')
                }
            },

        }
    }
</script>


<style scoped>
    .forms-warp {
        display: grid;
        position: absolute;
        width: 45%;
        height: 100%;
        top: 0;
        left: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        transition: .8s ease-in-out;
    }

    form {
        display: flex;
        max-width: 260px;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        flex-direction: column;
        justify-content: space-evenly;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        transition: opacity .02s .4s;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .logo>h4 {
        font-size: 1.1rem;
        margin-top: -9px;
        letter-spacing: -0.5px;
        color: #151111;
    }

    .heading>h2 {
        font-size: 2.1rem;
        font-weight: 600;
        color: #151111;
    }

    .heading>h6 {
        display: inline;
        font-size: .75rem;
        font-weight: 400;
        color: #bababa;
    }

    .toggle {
        font-size: .75rem;
        font-weight: 500;
        text-decoration: none;
        color: #151111;
        transition: .3s;
    }

    .toggle:hover {
        color: #4187f6;
    }

    .input-wrap {
        position: relative;
        height: 37px;
        margin-bottom: 2rem;
    }

    .input-field {
        position: absolute;
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        outline: none;
        border-bottom: 1px solid #bbb;
        padding: 0;
        font-size: .95rem;
        color: #151111;
    }

    label {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: .95rem;
        color: #bbb;
        pointer-events: none;
        transition: .4s;
    }

    .input-field:valid~label,
    .input-field:focus~label {
        font-size: .75rem;
        top: -2px;
    }

    .sign-btn {
        display: inline-block;
        width: 100%;
        height: 43px;
        background-color: #151111;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: .8rem;
        font-size: .8rem;
        margin-bottom: 2rem;
        transition: .3s;
    }

    .sign-btn:hover {
        background-color: #4187f6;
    }

    .text {
        color: #bbb;
        font-size: .7rem;
    }

    .text>a {
        color: #bbb;
        transition: .3s;
    }

    .text>a:hover {
        color: #4187f6;
    }
</style>